<template>
  <div class="page-modal">
    <el-dialog v-model="dialogVisible" title="新建用户" width="30%" center>
      <dsq-form v-bind="dialogConfig" v-model="dialogData"> </dsq-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineExpose, watch } from 'vue';
import { IDialogType } from '@/views/main/system/user/config/type';
import { dsqForm } from '@/base-ui/form/index';
const dialogVisible = ref(false);

const props = defineProps<{
  dialogConfig: IDialogType;
  defaultConfig: any;
}>();
/* 属性复现 */
const dialogData = ref<any>({});
const orginDefaultConfig = {};
watch(
  () => props.defaultConfig,
  (newValue) => {
    for (const item in newValue) {
      dialogData.value[`${item}`] = newValue[`${item}`];
    }
  },
  { deep: true }
);
watch(
  () => props.dialogConfig,
  (newValue) => {
    console.log(newValue);
  },
  {
    deep: true
  }
);
defineExpose({
  dialogVisible
});
</script>

<style scoped></style>
